<template>
  <div>
    <el-container style="margin-top: -20px">
      <el-main>
        <el-button-group style="float: right" v-if="type != 1">
          <el-button @click="showedit = true" size="mini" type="danger"
            >修改</el-button
          >
          <el-button @click="deleteinterview" size="mini" type="warning"
            >删除</el-button
          >
          <el-button
            v-print="printContent"
            class="btn no-print"
            @click="geturl"
            size="mini"
            >打印</el-button
          ></el-button-group
        >

        <h4 style="margin-top: 0px">基础信息</h4>
        <el-descriptions class="margin-top" size="medium" :column="2" border>
          <el-descriptions-item
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-user"></i>
              姓名
            </template>
            {{ form.name }}
          </el-descriptions-item>

          <el-descriptions-item
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-tickets"></i>
              性别
            </template>
            {{ form.sex }}
          </el-descriptions-item>

          <el-descriptions-item
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-tickets"></i>
              年龄
            </template>
            {{ form.age }}
          </el-descriptions-item>

          <el-descriptions-item
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-user"></i>
              职位
            </template>
            {{ form.post }}
          </el-descriptions-item>

          <el-descriptions-item
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-user"></i>
              应聘部门
            </template>
            {{ depname }}
          </el-descriptions-item>

          <el-descriptions-item
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-tickets"></i>
              婚否
            </template>
            {{ form.marry }}
          </el-descriptions-item>

          <el-descriptions-item
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机
            </template>
            {{ form.mobile }}
          </el-descriptions-item>

          <el-descriptions-item
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              紧急联系人
            </template>
            {{ form.ecname }}
          </el-descriptions-item>

          <el-descriptions-item
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              与本人关系
            </template>
            {{ form.ec }}
          </el-descriptions-item>

          <el-descriptions-item
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              联系人手机
            </template>
            {{ form.ecmobile }}
          </el-descriptions-item>

          <el-descriptions-item
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-user"></i>
              籍贯
            </template>
            {{ form.jiguan }}
          </el-descriptions-item>

          <el-descriptions-item
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-user"></i>
              职称
            </template>
            {{ form.title }}
          </el-descriptions-item>

          <el-descriptions-item
            :span="2"
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-user"></i>
              职业资格
            </template>
            {{ form.pq }}
          </el-descriptions-item>

          <el-descriptions-item
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-user"></i>
              政治面貌
            </template>
            {{ form.political }}
          </el-descriptions-item>

          <el-descriptions-item
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-user"></i>
              民族
            </template>
            {{ form.nation }}
          </el-descriptions-item>

          <el-descriptions-item
            :span="2"
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-tickets"></i>
              爱好
            </template>
            {{ form.hobby }}
          </el-descriptions-item>

          <el-descriptions-item
            :span="2"
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              身份证号
            </template>
            {{ form.idcardnum }}
          </el-descriptions-item>

          <el-descriptions-item
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-tickets"></i>
              身高
            </template>
            {{ form.tall }}
          </el-descriptions-item>

          <el-descriptions-item
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-user"></i>
              血型
            </template>
            {{ form.blood }}
          </el-descriptions-item>

          <el-descriptions-item
            :span="2"
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-tickets"></i>
              邮箱
            </template>
            {{ form.email }}
          </el-descriptions-item>

          <el-descriptions-item
            :span="2"
            :contentStyle="{ 'text-align': 'center' }"
            :labelStyle="{ 'text-align': 'center' }"
          >
            <template slot="label">
              <i class="el-icon-tickets"></i>
              家庭住址
            </template>
            {{ form.address }}
          </el-descriptions-item>
        </el-descriptions>

        <h4>教育经历</h4>
        <el-table
          :data="eduexp"
          border
          style="width: 100%"
          :header-cell-style="{
            background: '#fafafa',
            color: '#979b9f',
            fontWeight: 'normal',
          }"
        >
          <el-table-column
            prop="degree"
            label="学位"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="stime"
            label="入学时间"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="etime"
            label="毕业时间"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="学校名称"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="major"
            label="专业"
            header-align="center"
            align="center"
          >
          </el-table-column>
        </el-table>

        <h4>工作经历</h4>
        <el-table
          :data="workexp"
          border
          style="width: 100%"
          :header-cell-style="{
            background: '#fafafa',
            color: '#979b9f',
            fontWeight: 'normal',
          }"
        >
          <el-table-column
            prop="stime"
            label="入职时间"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="etime"
            label="离职时间"
            header-align="center"
            align="center"
          >
            <template slot-scope="{ row }">
              {{ row.etime == "1000-01-01" ? "至今" : row.etime }}
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="公司名称"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="post"
            label="职位"
            header-align="center"
            align="center"
          >
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

    <el-dialog :visible.sync="showedit" width="60%" :append-to-body="true">
      <work-user-info-edit
        :form="form"
        :eduexp="eduexp"
        :workexp="workexp"
        :editinfo="editinfo"
        :change="change"
        :type="type"
      ></work-user-info-edit
    ></el-dialog>
  </div>
</template>


<script>
import print from "vue-print-nb";
import WorkUserInfoEdit from "../WorkUser/WorkUserInfoEdit.vue";
export default {
  components: { WorkUserInfoEdit },

  props: ["form", "workexp", "eduexp","change", "depname", "type"],

  directives: {
    print,
  },

  data() {
    return {
      editinfo: false,
      showedit: false,
      printContent: {
        url: "", // 打印的url
        preview: true, // 预览工具是否启用
        previewTitle: "面试人员信息表打印预览",
        popTitle: "", // 打印页面的页眉
        // extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
      },
    };
  },

  methods: {
    // getdepname() {
    //   // console.log(this.selectdepartment);

    //   for (var i = 0; i < this.selectdepartment.length; i++) {

    //     if (this.selectdepartment[i].id === this.form.depid) {
    //       this.depname = this.selectdepartment[i].label;
    //       console.log(this.depname);
    //       break;
    //     }
    //   }
    // },

    async deleteinterview(index, row) {
      this.$confirm("是删除该条信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let datas = {
            id: this.form.id,
          };
          this.$axios
            .post("api/interview/deleteinterview", datas)
            .then((response) => {
              this.$message({
                message: response.data.msg,
                type: "success",
              });
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    geturl() {
      let url = "interviewprint?id=" + this.form.id;
      this.printContent.url = url;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>